@use '../Variables.scss';

.compact {
  .datePicker {
    .MuiPickersInputBase-root {
      .MuiPickersSectionList-root {
        padding: 0.75em;
      }
    }
  }
}

.datePicker {
  width: 13em;
  .MuiPickersInputBase-root {
    padding: 0 0.25em 0 0;
    background: Variables.$lighter-grey;
    .MuiPickersSectionList-root {
      padding: 1em;
    }    
    fieldset {
      border: none;
      outline: none;
      &.MuiPickersOutlinedInput-notchedOutline {
        border: none;
      }
    }
    
  }
  .Mui-focusVisible {
    color: Variables.$blue;
  }
}

.MuiPickersLayout-root {
  max-height: 20em;
  .MuiYearCalendar-root {
    width: inherit;
    width: auto;
    max-height: 15.5em;
    .MuiPickersYear-yearButton {
      width: auto;
      height: auto;
      margin: 0;
    }
  }
  .MuiDateCalendar-root {
    width: 20em;
    height: auto;
    max-height: auto;
    padding: 0.5em 1em;
    .MuiPickersCalendarHeader-root {
      max-height: auto;
      min-height: auto;
      padding: 0;
      margin: 0;
    }
    .MuiDayCalendar-header {
      span {
        width: 3em;
        height: 3em;
      }
    }
    .MuiPickersDay-root {
      width: 3em;
      height: 3em;
    }
  }
  button {
    border-radius: Variables.$radius;
    &.MuiPickersDay-today {
      border: inherit;
      background: Variables.$mid-grey;
    }
    &.Mui-selected {
      color: white;
      background: Variables.$blue;
    }
  }
}
.dark {
  .datePicker {
    .MuiPickersInputBase-root {
      background: Variables.$darker-grey;
    }
  }  
  .MuiPickersLayout-root {
    button.MuiPickersDay-today {
      color: Variables.$darker-grey;
    }
  }
}